<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>网页效果集合</title>
    <style>
        .item {
            position: relative;
            width: 100px;
            height: 100px;
            margin: 10px;
            border: 1px solid green;
        }

        .item div {
            position: absolute;
            width: 100px;
            height: 100px;
        }

        .show {
            display: block;
        }

        .hide {
            display: none;
        }

        .d2 {
            background-color: green;
        }
    </style>
</head>
<body>
<script src="jquery/jquery.1.8.1.js"></script>
<div class="item">
    <div class="d1 show">x1</div>
    <div class="d2 hide">x2</div>
</div>
<div class="item">
    <div class="d1 show">y1</div>
    <div class="d2 hide">y2</div>
</div>
<div id="num">5000</div>
<script>
    $(function () {
        $("div.item").each(function (index) {
            $(this).hover(function () {
                $(this).find(".d1").addClass("hide").removeClass("show");
                $(this).find(".d2").addClass("show").removeClass("hide");
            }, function () {
                $(this).find(".d1").addClass("show").removeClass("hide");
                $(this).find(".d2").addClass("hide").removeClass("show");
            });
        });

        function increment(element, duration, from, to) {
            $({countNum: from}).animate({countNum: to}, {
                duration: duration,
                easing: "linear",
                step: function () {
                    $(element).html(Math.floor(this.countNum));
                },
                complete: function () {
                    $(element).html(this.countNum);
                }
            });
        }

        increment('#num', 2500, 1, 5000);

    });
</script>
</body>
</html>
